<!DOCTYPE html>
<html>
<head>
    <title>基于Boa的WEB网页监控系统</title>
    <meta charset="UTF-8">
    <style>
        /* 关键样式：强制所有元素同行显示 */
        .single-line-container {
            white-space: nowrap; /* 禁止换行 */
            overflow-x: auto; /* 横向滚动条（内容超宽时） */
        }
        .single-line-container > * {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px; /* 元素间距 */
        }
        /* 调整iframe尺寸 */
        .single-line-container iframe {
            width: 300px;
            height: 225px; /* 保持4:3比例缩小 */
        }
        /* 时间显示样式 */
        #nowDiv {
            display: inline-block;
            margin-left: 20px;
        }
    </style>
</head>

<body onload="show()">
    <!-- 单行容器 -->
    <div class="single-line-container">
        <!-- 时间显示 -->
        <div id="nowDiv"></div>
        
        <!-- 主标题 -->
        <h1 style="margin:0;">WEB无线网络监控系统设计</h1>
        
        <!-- 监控画面 -->
        <iframe src="http://192.168.9.200:8080/?action=stream"></iframe>
        
        <!-- 设计思路 -->
        <div>
            <span>设计思路：</span>
            <span>第一、......；</span>
            <span>第二、......；</span>
            <span>第三、......；</span>
            <span>第四、......</span>
        </div>
        
        <!-- 拍照链接 -->
        <a target="_blank" href="http://192.168.9.200:8080/?action=snapshot">拍照</a>
        
        <!-- 版权信息 -->
        <span>Design by: 
            <a href="http://www.makeru.com.cn" target="_blank">华清远见创客学院</a>
        </span>
    </div>

    <script>
        // 时间显示函数
        function show() {
            var date = new Date();
            var now = date.getFullYear() + "年" + 
                     (date.getMonth()+1) + "月" + 
                     date.getDate() + "日 " + 
                     date.getHours() + ":" + 
                     date.getMinutes() + ":" + 
                     date.getSeconds();
            document.getElementById("nowDiv").innerHTML = now;
            setTimeout(show, 1000);
        }
        
        // 密码校验（原样保留）
        var password = prompt('请输入密码:','');
        if (password != 'xiaohui') {
            alert("密码不正确!");
            window.close();
        }
    </script>
</body>
</html>
